//地图
var mapData=[
	{name:'北京',value:544},
	{name:'广东',value:326},
	{name:'上海',value:194},
	{name:'浙江',value:163},
	{name:'江苏',value:140},
	{name:'天津',value:130},
	{name:'福建',value:84},
	{name:'河北',value:83},
	{name:'山东',value:81},
	{name:'湖北',value:80},
	{name:'四川',value:68},
	{name:'辽宁',value:67},
	{name:'湖南',value:52},
	{name:'河南',value:39},
	{name:'山西',value:34},
	{name:'吉林',value:34},
	{name:'黑龙江',value:32},
	{name:'重庆',value:29},
	{name:'安徽',value:29},
	{name:'陕西',value:29},
	{name:'江西',value:26},
	{name:'贵州',value:23},
	{name:'广西',value:18},
	{name:'云南',value:16},
	{name:'内蒙古',value:14},
	{name:'宁夏',value:13},
	{name:'新疆',value:11},
	{name:'海南',value:10},
	{name:'甘肃',value:7},
	{name:'西藏',value:2},
	{name:'青海',value:2}
]

var geoCoordMap={}
var mapFeatures = echarts.getMap('china').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

function getOptionMap(data){
	var optionMap = {
		tooltip : {
			trigger : 'item',
			formatter : function(param) {
				// console.log(param)
				return '<div>' + param.name + '</div>' + 
						'<div>企业数量：'+ param.data.value[2] + '</div>';
			}
		},
		geo : {
			show : true,
			zoom : 1.2,
			roam : false,
			map : 'china',
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#285ac6',
					borderWidth : 1,
					areaColor : '#123082',
					shadowBlur : 3,
					shadowColor : '#081435',
					shadowOffsetX : -4,
					shadowOffsetY : 8
				},
				emphasis : {
					areaColor : '#fce24f',
					borderColor : '#fce24f'
				}
			}
		},
		series : [ {
			type : 'map',
			zoom : 1.2,
			mapType : 'china',
			// geoIndex: 0,
			roam : false,
			label : {
				normal : {
					show : false,
					textStyle : {
						color : '#fff'
					}
				},
				emphasis : {
					show : true,
					textStyle : {
						color : '#fff'
					}
				}
			},
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#3770ea',
					borderWidth : 1,
					areaColor : '#0f2d87'
				},
				emphasis : {
					areaColor : '#2a56bd',
					borderColor : '#2a56bd',
				// opacity: 0.8,
				}
			},
			data : convertData(data)
		}, {
			name : 'Top 5',
			type : 'effectScatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				return val[2] / 544 * 15 + 10
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(data.sort(function(a, b) {
				return b.value - a.value
			}).slice(0, 5))
		}, {
			name : 'Top 5',
			type : 'scatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				// return val*4+8;
				return val[2] / 544 * 15 + 10
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(data.sort(function(a, b) {
				return b.value - a.value;
			}).slice(5))
		} ]
};
	return optionMap;
}

var mapChart = echarts.init(document.getElementById('ec_map'))
mapChart.setOption(getOptionMap(mapData))

// 饼图
var dataAll=[{value:1600, name:'IDC'},
			 {value:97, name:'CDN'},
             {value:1800, name:'ISP'},
             {value:142, name:'云计算'}]
var pieOption = function(data){
	var pieOption={
		// color : ["#00a9e1","#0046af","#360293","#560081","#af0058",
		// "#ff8700", "#ffe34e", "#93dd6e"],
		color : ["#ffe34e",  "#93dd6e", "#ff8700","#00a9e1","#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e","#ffe34e","#93dd6e","#ff8700","#b8ff2e","#09e24b","#8f46e9","#7317ab","#ba0058", "#09a7e2", "#93dd6e","#09e2cb","#00a9e1","#0046af"],
		//color : ["#00a9e1","#0046af","#360293","#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e"],
    title : {
    	show:false,
	    text: '某站点用户访问来源',
	    subtext: '纯属虚构',
	    x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    	show:false,
    		top:'top',
    		right:'5%',
    		textStyle:{
    			color: 'rgba(255,255,255,0.8)'
    		},
        orient: 'vertical',
        data: legendData(data)
    },
    series : [
        {
          name: '',
          type: 'pie',
          radius : '55%',
          center: ['43%', '50%'],
          data: data,
          itemStyle: {
              normal:{
                  label:{
                      color:'#fff',
                  }
              },
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
        }
    ]
	}
	return pieOption
}

function legendData(data){
	var arr=[];
	for(var i=0;i<data.length;i++){
		arr.push(data[i].name)
	}
	return arr
}

var pieMiddleChart = echarts.init(document.getElementById('ec_pie_middle'))
pieMiddleChart.setOption(pieOption(dataAll));

//柱状图
var dataAllRight=[
	{name:'北京',value:544},
	{name:'广东',value:326},
	{name:'上海',value:194},
	{name:'浙江',value:163},
	{name:'江苏',value:140},
	{name:'天津',value:130},
	{name:'福建',value:84},
	{name:'河北',value:83},
	{name:'山东',value:81},
	{name:'湖北',value:80}
]

var xData=function(data,key){
	var arr=[];
	for(var i=0;i<data.length;i++){
		arr.push(data[i][key])
	}
	return arr
	console.log(arr,'----')
}

var barOption = {
    color : ["#1de5f2","#0edf4d","#ff9100"],  
    legend: {
    	show:false,
    	textStyle:{
    			color: 'rgba(255,255,255,0.8)'
    		}
    },
    tooltip : {
        trigger: 'item',
    },
    grid: {
        top:30,
        left: '3%',
        right: '3%',
        bottom: 30,
        containLabel: true
    },
    xAxis: {
//      boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            }
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        data : xData(dataAllRight,'name')
    },
    yAxis : {
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:'企业数',
            type:'bar',
            smooth:true,
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0
                }
            },
            data:xData(dataAllRight,'value')
        }
    ]
};
var barChart = echarts.init(document.getElementById('ecBar'))
barChart.setOption(barOption);


var n=0;
$(".titleTab li").click(function(){
	n=$(this).index();
	$(this).addClass('active').siblings().removeClass('active')
	if(n==0){
//		pieMiddleChart.setOption(pieOption(dataAll));
		$(".ec_pie").show().siblings().hide()
	}else if(n==1){
		$(".ecBar").show().siblings().hide()
//		pieMiddleChart.setOption(pieOption(dataAllRight));
	}
})


//折线图
var timeData= [2015,2016,2017]
var data1=[708, 845,1017]
var data2=[0, 18, 140]
var data3=[0, 20, 204]
var lineOption = {
    color : ["#1de5f2","#0edf4d","#ff9100"],  
    legend: {
    	show:true,
    	textStyle:{
    			color: 'rgba(255,255,255,0.8)'
    		}
    },
    tooltip : {
        trigger: 'axis',
    },
    grid: {
        top:30,
        left: '3%',
        right: '3%',
        bottom: 30,
        containLabel: true
    },
    xAxis: {
        boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            }
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        data : timeData
    },
    yAxis : {
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:'IDC/ISP企业数',
            type:'line',
            smooth:true,
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0
                }
            },
            data:data1
        },
        {
            name:'CDN企业数',
            type:'line',
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#00a9e1',
            }},
           /* areaStyle: {
                normal: {
                    color:'#0edf4d',
                    opacity: 0.2
                }
            },*/
            data:data2
        },
        {
            name:'云计算企业数',
            type:'line',
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#ff9100',
            }},
            data:data3
        }
    ]
};

var lineChart = echarts.init(document.getElementById('ecLine'))
lineChart.setOption(lineOption);

window.addEventListener('resize',function(){
//	pieLeftChart.resize();
	pieMiddleChart.resize();
//	pieRightChart.resize();
	mapChart.resize();
	lineChart.resize()
})
